import { defineConfig, loadEnv } from "vite";
import fs from "fs";
import type { ConfigEnv } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
import vue from "@vitejs/plugin-vue";
// import path from 'path';
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { resolve } from "path";
// defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
export default defineConfig(({ command, mode }: ConfigEnv): any => {
  console.log(command, mode, "===");
  const root = process.cwd();
  const env = loadEnv(mode, root); // 环境变量对象
  console.log("环境变量------", env);
  // console.log('文件路径（ process.cwd()）------', root)
  // console.log('文件路径（dirname）------', __dirname + '/src')
  // 这里只加入了element的有其他的也加在这里
  let optimizeDepsElementPlusIncludes = ["element-plus/es"];

  //  预加载element样式 有其他组件也是如此设置即可
  fs.readdirSync("node_modules/element-plus/es/components").forEach(
    (dirname: string) => {
      fs.access(
        // 其他框架这个路径根据控制台输出进行修改 有的项目时加载的是 css.mjs 有些是 index.mjs 这个路径vite控制台能够看出来
        `node_modules/element-plus/es/components/${dirname}/style/css.mjs`,
        (err: any): void => {
          if (!err) {
            optimizeDepsElementPlusIncludes.push(
              `element-plus/es/components/${dirname}/style/css`
            );
          }
        }
      );
    }
  );
  optimizeDepsElementPlusIncludes = optimizeDepsElementPlusIncludes.concat([
    "@vueup/vue-quill",
    "quill-image-uploader",
    "quill-blot-formatter",
    "compressorjs",
    "dayjs",
    "lodash",
    "crypto-js",
    "lodash-es",
  ]);
  console.log(
    "%c                 _oo0oo_                     \n" +
      "                  o8888888o										\n" +
      '                  88" . "88										\n' +
      "                  (| -_- |)										\n" +
      "                   O\\ = /O										\n" +
      "               ____/`---'\\____									\n" +
      "             .   ' \\\\| |// `.									\n" +
      "              / \\\\||| : |||// \\								\n" +
      "           / _||||| -胡神- |||||- \\								\n" +
      "              | | \\\\\\ - /// | |								\n" +
      "            | \\_| ''\\---/'' | |								\n" +
      "             \\ .-\\__ `-` ___/-. /							\n" +
      "          ___`. .' /--.--\\ `. . __							\n" +
      '       ."" "< `.___\\_<|>_/___. ` >" "".        \n' +
      "      | | : `- \\`.;`\\ _ /`;.`/ - ` : | |       \n" +
      "        \\ \\ `-. \\_ __\\ /__ _/ .-` / /          \n" +
      "======`-.____`-.___\\_____/___.-`____.-'======  \n" +
      "                   `=---='                     \n" +
      ".............................................  \n\t\t" +
      "佛祖镇楼                  BUG之王题                          \n\t" +
      "佛曰:\n\t\t" +
      "写字楼里写字间，写字间里程序员；\n\t\t" +
      "程序人员写程序，又拿程序换酒钱。\n\t\t" +
      "酒醒只在网上坐，酒醉还来网下眠；\n\t\t" +
      "酒醉酒醒日复日，网上网下年复年。\n\t\t" +
      "但愿老死电脑间，不愿鞠躬老板前；\n\t\t" +
      "奔驰宝马贵者趣，公交自行程序员。\n\t\t" +
      "别人笑我忒疯癫，我笑自己命太贱；\n\t\t" +
      "不见满街漂亮妹，哪个归得程序员？"
  );
  // // dev 独有配置
  return {
    root, //项目根目录（index.html 文件所在的位置） 默认： process.cwd()
    base: env.VITE_BASE_PATH || "/", //  开发或生产环境服务的公共基础路径：默认'/'   1、绝对 URL 路径名： /foo/；应用需要部署在一个子路径下，如https://example.com/myapp/，则需要设置base为'/myapp/'‌ 2、完整的 URL： https://foo.com/； 3、空字符串或 ./这常用于将应用部署在不同路径的场景（用于开发环境）
    // publicDir: resolve(__dirname, "./dist"), //默认'public'  作为静态资源服务的文件夹  (打包public文件夹会没有，里面得东西会直接编译在dist文件下)
    // assetsInclude: resolve(__dirname, './src/assets'), // 静态资源处理
    define: {
      //不配置的话，使用process.env会报错
      "process.env": process.env,
      // 'process.env': { // 手动添加process.env
      //  'NODE_ENV':'development'
      // },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
          // 给导入的路径最后加上 ;
          additionalData: `@use "@/assets/scss/mixin.scss" as *;`,
          api: "modern-compiler", // or 'modern'
        },
      },
      postcss: {
        plugins: [tailwindcss(), autoprefixer()],
      },
    },
    optimizeDeps: {
      include:
        process.env.NODE_ENV == "development"
          ? optimizeDepsElementPlusIncludes
          : [],
    },
    // ******插件配置******
    plugins: [
      vue(),
      AutoImport({
        //安装两行后你会发现在组件中不用再导入ref，reactive等
        resolvers: [ElementPlusResolver()],
        // 自动导入 Vue 相关函数，如 ref、reactive、onMounted 等
        imports: ["vue", "vue-router", "pinia"],
        // 生成一个全局的类型声明文件，用于支持 TS 和 IDE 智能提示
        dts: true,
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        //默认存放位置
        //dts: "src/components.d.ts",
      }),
      createSvgIconsPlugin({
        // 这个是自己配置的图标路径，指出来（自己咋配置的咋来）
        iconDirs: [
          resolve(__dirname, "src/assets/svg"),
          resolve(__dirname, "src/assets/svg/article"),
          resolve(__dirname, "src/assets/svg/layOut"),
          resolve(__dirname, "src/assets/svg/login"),
          resolve(__dirname, "src/assets/svg/meun"),
          resolve(__dirname, "src/assets/svg/role"),
          resolve(__dirname, "src/assets/svg/user"),
        ],
        // 这个表示id，按这个来就对了
        symbolId: "icon-[name]",
      }),
      // viteMockServe({
      //   mockPath: "./src/mock", // 解析刚刚user.ts的位置
      //   localEnabled: true // 是否开启开发环境
      // }),
    ], //配置插件
    // ******开发服务器配置******
    server: {
      host: true, // 监听所有地址
      port: 8088, //指定开发服务器端口：默认3000
      open: true, //启动时自动在浏览器中打开
      cors: true, //为开发服务器配置 CORS
      proxy: {
        //配置自定义代理规则
        // 字符串简写写法
        // "/jpi": "http://192.168.1.97:4567",
        // "/api": {
        //   target: "http://192.168.1.97:108",
        //   changeOrigin: true, //是否跨域
        //   rewrite: (path: string) => path.replace(/^\/api/, ""),
        // },
        // "/bokeefront": {
        //   target: "http://120.48.56.18:8000",
        //   changeOrigin: true, //是否跨域
        //   configure: (proxy, options) => {
        //     console.log('Proxy configured for /bokeefront:', options);
        //   }
        // },
      },
      // hmr: {
      //   overlay: false
      // }
    },
    // ******项目构建配置******
    build: {
      target: "modules", //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
      outDir: "dist", // 构建得包名  默认：dist
      sourcemap: false, //构建后是否生成 source map 文件
      minify: "esbuild", // 项目压缩 :boolean | 'terser' | 'esbuild'
      chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
      cssTarget: "chrome61", //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
      rollupOptions: {
        output: {
          // 最小化拆分包
          manualChunks: (id: string | string[]) => {
            if (id.includes("node_modules")) {
              return id
                .toString()
                .split("node_modules/")[1]
                .split("/")[0]
                .toString();
            }
          },
          //打包抽离成规范存储
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: "js/[name].[hash].js",
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: "js/[name].[hash].js",
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: "[ext]/[name].[hash].[ext]",
          // 拆分js到模块文件夹
          // chunkFileNames: (chunkInfo) => {
          //     const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
          //     const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
          //     return `js/${fileName}/[name].[hash].js`;
          // },
        },
      },
    },
    // ******resolver配置******
    resolve: {
      alias: {
        //另一个称号的意思
        // 别名配置
        // 键必须以斜线开始和结束
        "@": resolve(__dirname, "src"),
        components: resolve(__dirname, "./src/components"),
        "#": resolve(__dirname, "types"),
        build: resolve(__dirname, "build"),
        "@api": resolve(__dirname, "src/api"),
      },
    },
  };
});
